<template>
  <div>
    <div style="background-color:#fff;display:flex; flex-wrap:  wrap;padding: 10px;margin: 10px">
      <template v-for="(item,index) in dataRecord">
        <tag :key="index" :closable='edit' @close='removeCondition(item)' style="padding: 3px;">
          {{ item.value.display_name }}
        </tag>
      </template>
    </div>
    <div>
    </div>
  </div>
</template>

<script>

  import gql from 'graphql-tag'
  import Tag from '../ctrls/Tag'

  export default {
  name: 'Many2manyTags',
    components: {Tag},
  props: {
    field: {
      type: Object,
      default() {
        return {}
      }
    },
    edit: {type: Boolean, defautl: false},
    model: {type: String, default: ''},
    id: {type: Number, default: 0},
    saveFast: {type: Boolean, default: true}
  },
    inject: ['value'],
  data: function () {
    return {
      checkValue: this.value.cval,
      searchText: '',
      radioSearchHeight: '0px',
      showPopup: false,
      doNew: false,
      newName: ''
    }
  },
    apollo: {
      dataRecord: {
        query: gql`query qdv($model:String,$domain:String!,$queryFields:[String]){
                   dataRecord:allRecord(model:$model,domain:$domain,fields:$queryFields){
            value
          }
         }`,
        variables() {
          return {
            model: this.field.relation,
            domain: JSON.stringify([['id', 'in', this.checkValue]]),
            queryFields: ['id', 'display_name']
          }
        },
        skip() {
          return !(this.field.relation && this.checkValue && (this.checkValue.length > 0))
        }
      },
      allRecord: {
        query: gql`query qdv($model:String,$domain:String!,$queryFields:[String]){
                   allRecord:allRecord(model:$model,domain:$domain,fields:$queryFields,limit:999){
            value
          }
         }`,
        variables() {
          return {
            model: this.field.relation,
            domain: JSON.stringify([]),
            queryFields: ['id', 'display_name']
          }
        },
        skip() {
          return !this.showPopup
        }
    }
  },
  computed: {
    writeDict() {
      let v = {}
      v[this.field.name] = [[6, 0, this.checkValue]]
      v[this.field.relation_field] = this.id
      return v
    },
    newDict() {
      let v = {name: this.newName}
      if (this.field.relation_field) {
        v[this.field.relation_field] = this.id
      }
      return v
    }
  },
    watch: {},
  mounted: function () {

  },
  methods: {
    fNew: function () {
      let self = this
      this.$apollo.mutate({
        mutation: gql`mutation($model:String!,$value:JSON!){
  createRecord(model:$model,value:$value){
    ok
  }
}`,
        variables: {model: this.field.relation, value: this.newDict}
      })
        .then(function (response) {
          if (response && response.data.createRecord.ok) {
            self.doNew = false
            self.$apollo.queries.allRecord.refetch()
            self.newName = ''
          } else if (response && !response.data.createRecord.ok) {
            self.$message.error(response.data.errMsg)
          }
        })
        .catch(function (error) {
          console.log(error, __filename)
          self.$message.error(error)
        })
    },
    onValueChange: function (val) {
      if (this.saveFast) {
        let self = this
        this.$apollo.mutate({
          mutation: gql`mutation($id:Int!,$model:String!,$value:JSON!){
  writeRecord(id:$id,model:$model,value:$value){
    ok
  }
}`,
          variables: {id: this.id, model: this.model, value: this.writeDict}
        }).then(function (response) {
          if (response && response.data.writeRecord.ok) {
          } else if (response && !response.data.writeRecord.ok) {
            self.$message.error(response.data.errMsg)
          }
        })
          .catch(function (error) {
            console.log(error, __filename)
            self.$message.error(error)
          })
      } else {
          Vue.set(this.value, 'newval', this.newval)
          Vue.set(this.value, 'change', this.value.cval !== this.newval)
      }
      this.showPopup = false
    },
    onSubmit: function () {
      this.$apollo.queries.allRecord.refetch()
    },
    onFocus: function () {
      this.radioSearchHeight = '45px'
    },
    onCancel: function () {
      this.radioSearchHeight = '0px'
      this.showPopup = false
    },
    removeCondition(item) {
      const index = this.checkValue.indexOf(item.value.id)
      if (index > -1) {
        this.checkValue.splice(index, 1)
        this.onValueChange()
      }
    },
    clickChild(id) {
      this.checkValue.push(id)
    }

  }
}
</script>

<style type="less">

</style>
